Tạo RichMenu cho LINE Messaging API channel

I. Tiền đề:

Điều kiện

• Chúng ta có 1 LINE Messaging API channel

Mục tiêu:

• Tạo và thiết lập cài đặt Rich menu cho channel

Kết quả khi hoàn thành sẽ như sau:

Công cụ:

• draw.io: Để vẽ 1 Rich menu với kích thước như yêu cầu bên dưới
  • Điều kiện đối với Rich menu image được mô tả như sau:
    • Định dạng hình ảnh: JPEG hoặc PNG
    • Kích thước chiều rộng hình ảnh (pixel): 800 đến 2500
    • Kích thước chiều cao hình ảnh (pixel): 250 trở lên
    • Tỷ lệ cỡ ảnh (chiều rộng / chiều cao): 1,45 trở lên
    • Kích thước tệp tối đa: 1 MB

    

• LINE Bot Designer: Để thiết kế Rich menu

• Postman: Để thức hiện các lệnh gọi API tạo và thiết lập cài đặt Rich menu

Tại Collection, chúng ta sẽ tạo ra 1 Folder chứa các lời gọi API. Giao diện Postman sẽ tương tự như sau

II. Thực hiện

Bước 1: Tạo Rich menu

• Để tạo được 1 Rich menu, chúng ta cần Token của LINE Messaging API channel. Token có thể lấy được bằng cách truy cập Console của LINE developer

Token sẽ có dạng 1 chuỗi kí tự bất kì như sau:

Tiếp theo, mở Postman, tạo 1 Request mới như sau:

• Loại Request: POST
• Link API: https://api.line.me/v2/bot/richmenu
• Header: Authorization | Bearer {channel access token}

Sau khi ấn Send, Response trả về sẽ là richMenuId của Rich menu vừa tạo.

Bước 2: Upload ảnh Rich menu

Mở Postman, tạo 1 Request mới như sau:

• Loại Request: POST
• Link API: https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content
• Header:
  • Authorization | Bearer {channel access token}
  • Content-Type: image/jpeg hoặc image/png tuỳ vào loại ảnh của bạn
• Body: Upload ảnh đã tạo trên draw.io

Sau khi ấn Send, Response trả về sẽ là 1 object rỗng nếu request thành công

Bước 3: Cài đặt Rich menu mặc định cho LINE Messaging API channel

Mở Postman, tạo 1 Request mới như sau:

• Loại Request: POST
• Link API: https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
• Header:
  • Authorization | Bearer {channel access token}

Sau khi ấn Send, Response trả về sẽ là 1 object rỗng nếu request thành công

Kết quả là khi vào Channel trong LINE, Rich menu sẽ được hiển thị như sau:

Khi ấn bào nút BUTTON1, Date-time picker sẽ hiện lên như sau:

Như vậy chúng ta đã hoàn thành việc tạo 1 Rich menu cơ bản.

III. Tham khảo

• Tài liệu về API của Rich menu: https://developers.line.biz/en/reference/messaging-api/#rich-menu

Chúc bạn thành công!